<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="14 移除数据案例/checkDemo.css" />
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            $("#j_cbAll").click(function(){

                //prop()方法用于checked，selected，disabled，返回结果为true或FALSE
                var isChecked = $("#j_cbAll").prop("checked");
                if(isChecked) {
                    $("#j_tb").find(":checkbox").prop("checked",true);
                }else{
                    $("#j_tb").find(":checkbox").prop("checked",false);
                }
            })

            $("#j_tb").find(":checkbox").click(function(){
                var checkedLen = $("#j_tb").find(":checkbox:checked").length;
                var checkBoxLen = $("#j_tb").find(":checkbox").length;
                if(checkBoxLen == checkedLen) {
                    $("#j_cbAll").prop("checked",true);
                }else{
                    $("#j_cbAll").prop("checked",false);
                }
            })
        })
    </script>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th><input type="checkbox" id="j_cbAll" /></th>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>已学会</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td><input type="checkbox"/></td>
            <td>JavaScript</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>css</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>html</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>jQuery</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>